<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>计算器</title>
		<link rel="stylesheet" href="css/wt.css"/>
	</head>
	<body>
		<button>点击</button>
		
		<div id="box">
			<h1>计算器</h1>
			<span id="close" onclick="closebox()">&times;</span>
			<hr>
			<input id="ipt" type="text" placeholder="点击输入计算数字">
			<div class="btn-box">
				<input type="button" value="0" onclick="calc('0')">
				<input type="button" value="1" onclick="calc('1')">
				<input type="button" value="2" onclick="calc('2')">
				<input type="button" value="3" onclick="calc('3')">
				<input type="button" value="4" onclick="calc('4')">
				<input type="button" value="5" onclick="calc('5')">
				<input type="button" value="6" onclick="calc('6')">
				<input type="button" value="7" onclick="calc('7')">
				<input type="button" value="8" onclick="calc('8')">
				<input type="button" value="9" onclick="calc('9')">
				<input type="button" value="+" onclick="calc('+')">
				<input type="button" value="-" onclick="calc('-')">
				<input type="button" value="*" onclick="calc('*')">
				<input type="button" value="/" onclick="calc('/')">
				<input type="button" value="c" onclick="calc('c')">
				<input type="button" value="=" onclick="calc('=')">
				
			</div>
		</div>
		<script>
			function closebox(){
				document.getElementById("box").style.display = "none";
			}
			function calc(key){
				switch (key){
					case "c":
					document.getElementById("ipt").value = "";
					break;
					
					case "=":
					ipt.value = eval(ipt.value);;
					break;
					
					default:
					ipt.value = ipt.value + key;
					break;
				}
				
			}
			
		</script>
	</body>
</html>
